
<script lang="ts" setup>

import { onMounted, onBeforeUnmount, ref } from 'vue'

import * as echarts from 'echarts';

let year = ref(0)
let month = ref(0)
let day = ref(0)
let second = ref(0)
let minute = ref(0)
let hour = ref(0)

let interval: NodeJS.Timeout | null = null

const container1 = ref()
let myChart1: echarts.ECharts | null = null
const option1 = {
    title: {
        text: 'Referer of a Website',
        subtext: 'Fake Data',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    series: [
        {
            name: 'Access From',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],
            label: {
                position: 'inner',
                fontSize: 14
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 1548, name: 'Search Engine' },
                { value: 775, name: 'Direct' },
                { value: 679, name: 'Marketing', selected: true }
            ]
        },
        {
            name: 'Access From',
            type: 'pie',
            radius: ['45%', '60%'],
            labelLine: {
                length: 30
            },
            label: {
                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                backgroundColor: '#F6F8FC',
                borderColor: '#8C8D8E',
                borderWidth: 1,
                borderRadius: 4,
                rich: {
                    a: {
                        color: '#6E7079',
                        lineHeight: 22,
                        align: 'center'
                    },
                    hr: {
                        borderColor: '#8C8D8E',
                        width: '100%',
                        borderWidth: 1,
                        height: 0
                    },
                    b: {
                        color: '#4C5058',
                        fontSize: 14,
                        fontWeight: 'bold',
                        lineHeight: 33
                    },
                    per: {
                        color: '#fff',
                        backgroundColor: '#4C5058',
                        padding: [3, 4],
                        borderRadius: 4
                    }
                }
            },
            data: [
                { value: 1048, name: 'Baidu' },
                { value: 335, name: 'Direct' },
                { value: 310, name: 'Email' },
                { value: 251, name: 'Google' },
                { value: 234, name: 'Union Ads' },
                { value: 147, name: 'Bing' },
                { value: 135, name: 'Video Ads' },
                { value: 102, name: 'Others' }
            ]
        }
    ]
}

const container2 = ref()
let myChart2: echarts.ECharts | null = null
const option2 = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {},
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: 'Direct',
            type: 'bar',
            emphasis: {
                focus: 'series'
            },
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: 'Email',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
                focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: 'Union Ads',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
                focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: 'Video Ads',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
                focus: 'series'
            },
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: 'Search Engine',
            type: 'bar',
            data: [862, 1018, 964, 1026, 1679, 1600, 1570],
            emphasis: {
                focus: 'series'
            },
            markLine: {
                lineStyle: {
                    type: 'dashed'
                },
                data: [[{ type: 'min' }, { type: 'max' }]]
            }
        },
        {
            name: 'Baidu',
            type: 'bar',
            barWidth: 5,
            stack: 'Search Engine',
            emphasis: {
                focus: 'series'
            },
            data: [620, 732, 701, 734, 1090, 1130, 1120]
        },
        {
            name: 'Google',
            type: 'bar',
            stack: 'Search Engine',
            emphasis: {
                focus: 'series'
            },
            data: [120, 132, 101, 134, 290, 230, 220]
        },
        {
            name: 'Bing',
            type: 'bar',
            stack: 'Search Engine',
            emphasis: {
                focus: 'series'
            },
            data: [60, 72, 71, 74, 190, 130, 110]
        },
        {
            name: 'Others',
            type: 'bar',
            stack: 'Search Engine',
            emphasis: {
                focus: 'series'
            },
            data: [62, 82, 91, 84, 109, 110, 120]
        }
    ]
};
const container3 = ref()
let myChart3: echarts.ECharts | null = null
const option3 = {
    animationDurationUpdate: 0,
    series: [
        {
            name: 'hour',
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 12,
            splitNumber: 12,
            clockwise: true,
            axisLine: {
                lineStyle: {
                    width: 10,
                    color: [[1, 'rgba(0,0,0,0.7)']],
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                    shadowBlur: 15
                }
            },
            axisLabel: {
                fontSize: 10,
                distance: 15,
                formatter: function (value: any) {
                    if (value === 0) {
                        return '';
                    }
                    return value + '';
                }
            },
            pointer: {
                icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                width: 8,
                length: '55%',
                offsetCenter: [0, '8%'],
                itemStyle: {
                    color: '#C0911F',
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 8,
                    shadowOffsetX: 2,
                    shadowOffsetY: 4
                }
            },
            detail: {
                show: false
            },
            title: {
                offsetCenter: [0, '30%']
            },
            data: [
                {
                    value: 0
                }
            ]
        },
        {
            name: 'minute',
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 60,
            clockwise: true,
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            pointer: {
                icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                width: 5,
                length: '70%',
                offsetCenter: [0, '8%'],
                itemStyle: {
                    color: '#C0911F',
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 8,
                    shadowOffsetX: 2,
                    shadowOffsetY: 4
                }
            },
            anchor: {
                show: true,
                size: 20,
                showAbove: false,
                itemStyle: {
                    borderWidth: 15,
                    borderColor: '#C0911F',
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 8,
                    shadowOffsetX: 2,
                    shadowOffsetY: 4
                }
            },
            detail: {
                show: false
            },
            title: {
                offsetCenter: ['0%', '-40%']
            },
            data: [
                {
                    value: 0
                }
            ]
        },
        {
            name: 'second',
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 60,
            animationEasingUpdate: 'bounceOut',
            clockwise: true,
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            pointer: {
                icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                width: 3,
                length: '85%',
                offsetCenter: [0, '8%'],
                itemStyle: {
                    color: '#C0911F',
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 8,
                    shadowOffsetX: 2,
                    shadowOffsetY: 4
                }
            },
            anchor: {
                show: true,
                size: 15,
                showAbove: true,
                itemStyle: {
                    color: '#C0911F',
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 8,
                    shadowOffsetX: 2,
                    shadowOffsetY: 4
                }
            },
            detail: {
                show: false
            },
            title: {
                offsetCenter: ['0%', '-40%']
            },
            data: [
                {
                    value: 0
                }
            ]
        }
    ]
}
const container4 = ref()
let myChart4: echarts.ECharts | null = null
let option4 = {
    title: {
        text: 'Beijing AQI',
        left: '1%'
    },
    tooltip: {
        trigger: 'axis'
    },
    grid: {
        left: '10%',
        right: '30%',
        bottom: '10%'
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    toolbox: {
        right: 10,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
        }
    },
    dataZoom: [
        {
            startValue: '2014-06-01'
        },
        {
            type: 'inside'
        }
    ],
    visualMap: {
        top: 50,
        right: 10,
        pieces: [
            {
                gt: 0,
                lte: 50,
                color: '#93CE07'
            },
            {
                gt: 50,
                lte: 100,
                color: '#FBDB0F'
            },
            {
                gt: 100,
                lte: 150,
                color: '#FC7D02'
            },
            {
                gt: 150,
                lte: 200,
                color: '#FD0100'
            },
            {
                gt: 200,
                lte: 300,
                color: '#AA069F'
            },
            {
                gt: 300,
                color: '#AC3B2A'
            }
        ],
        outOfRange: {
            color: '#999'
        }
    },
    series: {
        name: 'Beijing AQI',
        type: 'line',
        data: [],
        markLine: {
            silent: true,
            lineStyle: {
                color: '#333'
            },
            data: [
                {
                    yAxis: 50
                },
                {
                    yAxis: 100
                },
                {
                    yAxis: 150
                },
                {
                    yAxis: 200
                },
                {
                    yAxis: 300
                }
            ]
        }
    }
}


function initChart() {
    myChart1 = echarts.init(container1.value);
    myChart1.setOption(option1);
    myChart2 = echarts.init(container2.value);
    myChart2.setOption(option2);
    myChart3 = echarts.init(container3.value);
    myChart3.setOption(option3);
    myChart4 = echarts.init(container4.value);
    let p = fetch('https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/aqi-beijing.json')
        .then(_ => _.json())
        .then(res => {
            option4.xAxis.data = res.map((item: Array<String>) => (item)[0]);
            option4.series.data = res.map((item: Array<String>) => (item)[1]);
            (myChart4 as echarts.ECharts).setOption(option4);
        })

    interval = setInterval(function () {
        var date = new Date();
        year.value = date.getFullYear()
        month.value = date.getMonth() + 1
        day.value = date.getDate()
        second.value = date.getSeconds();
        minute.value = date.getMinutes() + second.value / 60;
        hour.value = (date.getHours() % 12) + minute.value / 60;
        option3.animationDurationUpdate = 300;
        (myChart3 as echarts.ECharts).setOption({
            series: [
                {
                    name: 'hour',
                    animation: hour.value !== 0,
                    data: [{ value: hour.value }]
                },
                {
                    name: 'minute',
                    animation: minute.value !== 0,
                    data: [{ value: minute.value }]
                },
                {
                    animation: second.value !== 0,
                    name: 'second',
                    data: [{ value: second.value }]
                }
            ]
        });
    }, 1000)
    return p
}

onMounted(async () => {
    await initChart()
    window.addEventListener('resize', () => {
        myChart1?.resize()
        myChart2?.resize()
        myChart3?.resize()
        myChart4?.resize()
    })
})
onBeforeUnmount(() => {
    clearInterval(interval as NodeJS.Timeout)
})




</script>
<template>
    <el-row :gutter="20" class="container">
        <el-col :span="16" class="box_card">
            <el-card>
                <div class="container" ref="container1"></div>
            </el-card>
        </el-col>
        <el-col :span="8" class="box_card">
            <div>
                <el-card>
                    <div class="container" ref="container2"></div>
                </el-card>
            </div>
            <div>
                <el-card>
                    <div class="container" ref="container4"></div>
                </el-card>
            </div>
            <div>
                <el-row :gutter="8" class="height_100per">
                    <el-col :span="12">
                        <el-card>
                            <div class="dateTime">
                                <p>现在是：</p>
                                <div>
                                    <i>{{ year }}</i>
                                    <span>年</span>
                                    <i>{{ month }}</i>
                                    <span>月</span>
                                    <i>{{ day }}</i>
                                    <span>日</span>
                                </div>
                                <div>
                                    <i>{{ hour.toFixed(0) }}</i>
                                    <span>时</span>
                                    <i>{{ minute.toFixed(0) }}</i>
                                    <span>分</span>
                                    <i>{{ second.toFixed(0) }}</i>
                                    <span>秒</span>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card>
                            <div class="container" ref="container3"></div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </el-col>
    </el-row>
</template>
<style lang="scss" scoped>
.container {
    height: 100%;
    .box_card {
        height: 100%;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        & > div {
            height: 32%;
        }
        &::v-deep .el-card__body,
        &::v-deep .el-card {
            box-sizing: border-box;
            width: 100%;
            height: 100%;

            .container {
                width: 100%;
                height: 100%;
            }
        }

        .dateTime {
            div {
                margin-top: 10px;
            }
            p {
                margin-top: 15px;
                font-size: initial;
                font-weight: bold;
                color: rgb(170, 170, 170);
            }
            i {
                font-size: 30px;
                color: black;
                font-weight: 400;
                margin-right: 8px;
            }
            span {
                font-size: 12px;
                color: rgb(170, 170, 170);
            }
        }
    }
}
</style>
